<template>
  <div id="mainBgImg">
    <mo-header :title = 'title'></mo-header>
    <div class="container">
        <div class="left">
            <left-table></left-table>
            <left-chart1></left-chart1>
            <left-chart2></left-chart2>
        </div>
        <div class="center">
          <center-chart1></center-chart1>
          <center-chart2></center-chart2>
        </div>
        <div class="right">
          <right-circular></right-circular>
          <right-circular2></right-circular2>
          <right-circular3></right-circular3>
        </div>
    </div>
  </div>
</template>

<script>
import MoHeader from '../components/index/header'
import LeftTable from '../components/index/table'
import LeftChart1 from '../components/index/leftChart1'
import LeftChart2 from '../components/index/leftChart2'
import CenterChart1 from '../components/index/centerChart1'
import CenterChart2 from '../components/index/centerChart2'
import RightCircular from '../components/index/circular'
import RightCircular2 from '../components/index/circular2'
import RightCircular3 from '../components/index/circular3'
export default {
  data () {
    return {
      title: '移动数据综合平台'
    }
  },
  components: {
    MoHeader,
    LeftTable,
    LeftChart1,
    LeftChart2,
    CenterChart1,
    CenterChart2,
    RightCircular,
    RightCircular2,
    RightCircular3
  }
}
</script>

<style scoped>
  #mainBgImg{
    width: 100%;
    height: 100%;
    background: url('../images/bg.png') center/cover no-repeat;
    overflow: hidden;
  }
  span{
    font-family:Arial,sansserif;
  }
  .container{
    display: flex;
    width: 99%;
    height: calc(100% - 85px);
    margin:15px auto 0;
    justify-content: space-between;
  }
  .container .left,.container .center,.container .right{
    display: flex;
    justify-content: space-between;
    flex-flow: column;
  }
  .container .left,.container .right{
    width: 26%;
    height: 100%;
  }
  .container .center{
    width: 45%;
    height: 100%;
  }

</style>
